
// 登录tab栏切换
(function () {
  // tab栏切换
  const btn = document.querySelector('.nav_tab')
  const logins = document.querySelectorAll('.nav_login')
  btn.addEventListener('click', function (e) {
    const { tagName, dataset: { id } } = e.target
    console.log(id);
    if (tagName === 'A') {
      // tab栏样式切换
      document.querySelector('.nav_tab .active').classList.remove('active')
      e.target.classList.add('active')
      // 切换内容
      for (let i = 0; i < logins.length; i++) {
        logins[i].style.display = 'none'
      }
      logins[id].style.display = 'block'
    }
  })
}());
// qq登录 --- 切换登录
(function () {
  // 获取切换点击链接
  const lo = document.querySelector('.login_uname p a')
  const ln = document.querySelector('.login_erweima .footbtn .ln')
  // 点击快捷登录---切换为qq二维码
  lo.addEventListener('click', function () {
    document.querySelector('.login_uname').style.display = 'none'
    document.querySelector('.login_erweima').style.display = 'block'
  })
  // 点击用户登录 --- 切换为用户名密码登录
  ln.addEventListener('click', function () {
    document.querySelector('.login_uname').style.display = 'block'
    document.querySelector('.login_erweima').style.display = 'none'
  })
}());
// qq登录--用户名登录右侧复选框
(function () {
  // 获取点击的label
  const all = document.querySelector('.all')
  const friend = document.querySelector('.friend')
  // 获取相应 input
  const al = document.querySelector('#all')
  const fri = document.querySelector('#friend')
  let flag = false

  // 添加点击事件 -- 点击所有关联点击好友关系
  all.addEventListener('click', function (e) {
    // console.log(e.target);
    // const {src} = e.target
    flag = !flag
    // console.log(src);
    if (flag) {
      document.querySelector('.all img').src = './images/checkbox-checked.webp'
      document.querySelector('.friend img').src = './images/checkbox-checked.webp'
      fri.checked = flag
      al.checked = flag
      console.log(fri.checked, al.checked);
    } else {
      document.querySelector('.all img').src = './images/checkbox-unchecked.png'
      document.querySelector('.friend img').src = './images/checkbox-unchecked.png'
      fri.checked = flag
      al.checked = flag
      console.log(fri.checked, al.checked);
    }
  })
  friend.addEventListener('click', function (e) {
    flag = !flag
    if (flag) {
      document.querySelector('.all img').src = './images/checkbox-checked.webp'
      document.querySelector('.friend img').src = './images/checkbox-checked.webp'
      al.checked = flag
      fri.checked = flag
      console.log(al.checked, fri.checked);
    } else {
      document.querySelector('.all img').src = './images/checkbox-unchecked.png'
      document.querySelector('.friend img').src = './images/checkbox-unchecked.png'
      al.checked = flag
      fri.checked = flag
      console.log(al.checked, fri.checked);
    }
  })
}());
// 表单效验
(function () {
  // 2、 表单验证
  // --change事件执行时间： 当input内容发生改变，失焦时触发
  // --input事件执行时间：当input内容发生改变，立刻触发
  // 2.1  验证用户名输入是否合法  
  const username = document.querySelector('.login_uname .uname')
  username.addEventListener('change', verifyName)
  // 封装verifyName函数  -- 用户名校验
  function verifyName() {
    // 用户名判定规则
    const reg = /^[a-zA-Z0-9-_]{6,16}$/
    const span = username.nextElementSibling
    // 如果填写信息不符合要求，提示不合法信息，返回false
    if (!reg.test(username.value)) {
      span.innerHTML = '请输入6~16位英文数字下划线'
      return false
    }
    // 如果填写信息合法，什么都不显示，return true
    span.innerHTML = ''
    return true
  }
  // 2.4  密码输入是否合法
  const pwd = document.querySelector('.login_uname .pwd')
  pwd.addEventListener('change', verifyPwd)
  // 封装verifyPwd函数  -- 密码校验
  function verifyPwd() {
    //密码判定规则
    const reg = /^[a-zA-Z0-9-_]{6,20}$/
    const span = pwd.nextElementSibling
    // 如果填写信息不符合要求，提示不合法信息，返回false
    if (!reg.test(pwd.value)) {
      span.innerHTML = '请输入6~20位正确密码'
      return false
    }
    // 如果填写信息合法，什么都不显示，return true
    span.innerHTML = ''

    return true
  }
}());
// 点击登录后判断用户名和密码是否正确
document.querySelector('.qq_btn').addEventListener('click', function () {
  const username = document.querySelector('.login_uname .uname')
  const pwd = document.querySelector('.login_uname .pwd')
  const span = pwd.nextElementSibling
  const phone = localStorage.getItem('phone')
  const localPhone = localStorage.getItem('pwd')
  let success;
  if (username.value == phone && pwd.value == localPhone) {
    success = true
    // 存储正确的数值
    localStorage.setItem('success', success)

    // 隐藏登录框
    document.querySelector('.login_box').style.display = 'none'
    span.innerHTML = ''
    pwd.value = ''
    username.value = ''
    // render()
    location.reload()
  } else {
    span.innerHTML = '账号或者密码错误，请重新输入'
  }

  console.log(success);
})
// 差号
document.querySelector('.login_btn').addEventListener('click', function (e) {
  if (e.target.className === 'top_login__link') {
    document.querySelector('.login_box').style.display = 'block'
  }
})
document.querySelector('.login_cha').addEventListener('click', function () {
  document.querySelector('.login_box').style.display = 'none'
})

function render() {
  const success = localStorage.getItem('success')
  const login = document.querySelector('.login_btn')

  if (success) {
    login.innerHTML = ` <a href="#" class="userImg">
      <img src="./images/${pic}" class="smqq" alt="">
  </a>`
  } else {
    login.innerHTML = `<a href="#" class="top_login__link ">登录</a>`
  }
}
